<template>
  <div class="lgend-list">
    <div
      class="lgend-list-item"
      v-for="(item, index) in data"
      :key="`item-${index}`"
      :class="{ disabled: selected[item.name] == false }"
      @click="itemClick(item, index)"
    >
      <i class="dot" :style="{ backgroundColor: item.color }"></i>
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'LegendList',
  data() {
    return {
      selected: {}
    }
  },
  props: {
    // 数据格式：
    // [
    // { name: '正常', color: '#02E1FF' },
    // { name: '异常', color: '#FF7500' }
    // ]
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    itemClick(item, index) {
      this.selected[item.name] = !this.selected[item.name]
      const selected = this.selected[item.name]
      this.$emit('select', { name: item.name, index, selected })
      this.$emit('change', { name: item.name, index, selected })
    }
  },
  watch: {
    data: {
      handler(arr) {
        const selected = {}
        arr.forEach(item => {
          selected[item.name] = true
        })
        this.selected = selected
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.lgend-list {
  //display: flex;
  //justify-content: space-between;

  .lgend-list-item {
    cursor: pointer;
    display: inline-block;
    color: #a4ccfd;
    margin-right: 8px;

    .dot {
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 100%;
      margin: 0 3px 0 0;
    }

    &:last-child {
      margin-right: 0px;
    }

    &.disabled {
      cursor: not-allowed;
      color: #4c4c4c;
    }
  }
}
</style>
